<template>
	<view v-if="!loading" class="user-details">
		<view class="card">
			<view class="title">学校名称：{{info.school_name}}</view>
			<view class="info-list">
					<view class="info-item"><view class="flex-shrink">姓名：</view>{{info.linkman}}</view>
					<view class="info-item"><view class="flex-shrink">手机号：</view>{{info.phone}}</view>
					<view class="info-item"><view class="flex-shrink">身份证号：</view>{{info.id_card_no}}</view>
					<view class="info-item"><view class="flex-shrink">审核状态：</view>
						<view class="tags">
							<view v-if="info.is_audit === -1" class="tag-item tag-error">已驳回</view>
							<view v-if="info.is_audit === 0" class="tag-item tag-wait">待审核</view>
							<view v-if="info.is_audit === 1" class="tag-item tag-success">已审核</view>
						</view>
					</view>
				<view class="info-item" style="display: block;">
					<view class="flex-shrink">身份证：</view>
					<view class="ID-card-images">
						<view class="card-item" v-for="(item, index) in info.identity_card_data" :key="index" @click="handlePreviewImage(info.identity_card_data, index)">
							<image :src="item.url" mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="info-item" style="display: block;">
					<view class="flex-shrink">学生证：</view>
					<view class="card-images">
						<view class="item-img" v-for="(item, index) in info.student_card_data" :key="index" @click="handlePreviewImage(info.student_card_data, index)">
							<image :src="item.url" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="info.is_audit === 0" class="footer-btns">
			<button class="confirm-btn flex-1" @click="audit">审核</button>
		</view>
		
		<audit-option ref="auditOption" :gid="gid" @refresh="getDetail"></audit-option>
	</view>
</template>

<script>
	import { previewImage } from '@/utils/uploadImg.js'
	import auditOption from '../components/audit-option.vue';
	
	export default {
		components: {auditOption},
		data() {
			return {
				info: {},
				gid: '', // id
				loading: true
			};
		},
		onLoad(options) {
			this.gid = options.gid
			this.getDetail()
		},
		methods: {
			// 预览图片
			handlePreviewImage(lists, index) {
				const list = lists.map(item=> item.url)
				previewImage(list, index)
			},
			getDetail() {
				this.loading = true
				this.$api.agentUserIdentityDetailsApi(this.gid).then(res=> {
					this.info = {
						...res.data,
						identity_card_data: res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						student_card_data: res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					}
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			},
			audit() {
				this.$refs.auditOption.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-details {
		padding: 0 32rpx;
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.card {
			padding: 38rpx 32rpx;
			border-radius: 16rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			
			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}
			
			
			.info-list {
				gap: 16rpx;
				display: flex;
				padding-top: 36rpx;
				padding-bottom: 38rpx;
				flex-direction: column;
			}
			
			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;
				
				display: flex;
				// align-items: center;
			}
			
			.ID-card-images {
				gap: 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				// display: flex;
				// align-items: center;
				padding-top: 24rpx;
				padding-bottom: 8rpx;
				
				.card-item {
					flex: 1;
					height: 160rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.card-images {
				gap: 20rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-top: 24rpx;
				padding-bottom: 8rpx;
				
				.item-img {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				&::after {
					border: none;
				}
				
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		
		
			.product-lists {
				
				.product-item {
					display: flex;
					align-items: center;
					padding-top: 36rpx;
					padding-bottom: 36rpx;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;
				}
				
				.info-list {
					padding: 0;
				}
				
				.item-img {
					width: 154rpx;
					height: 154rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			
			.total {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
				color: rgba(0, 0, 0, 0.4);
			}
			
			.total-title {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
			}
			
			.total-price {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
			}
			
			.price-unit {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
			}
			
			.preferential {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: rgba(0, 0, 0, 1);
			}
			
			.detial-btn {
				color: #FF754C;
			}
			
			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
			
			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;
				
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;
				
				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}
			
			.tag-success {
				background-color: #009D6E;
			}
			
			.tag-complate {
				background-color: #D4D4D4;
			}
			
			.tag-wait {
				background-color: #003D99;
			}
			
		}
	
		
		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
			gap: 14rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
